<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,ul,li,h3{
            margin: 0;
            padding: 0;
        }        

        li{
            list-style: none;
        }

        h3{
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
        } 

        h3:hover{
            background: #0ff;
            cursor: pointer;
        }

        ul{
            background: #0ff;
            display: none;
        }
        
        ul li{
            height: 31px;
            line-height: 31px;
            padding-left: 35px;
        }

        #container{
            width: 216px;
            height: 500px;
            background: #00ffd9;
            color: yellow;
        }
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="container">
        <h3>会员管理</h3>
        <ul>
            <li>会员列表</li>
            <li>新增会员</li>
            <li>禁用列表</li>
        </ul>

        <h3>商品管理</h3>
        <ul>
            <li>商品列表</li>
            <li>新增商品</li>
            <li>图片管理</li>
        </ul>

        <h3>订单管理</h3>
        <ul>
            <li>全部订单</li>
            <li>待发货</li>
            <li>待收货</li>
            <li>待付款</li>
            <li>待评论</li>
        </ul>
    </div>
    <script>
        $(function(){
            $('h3').click(function(){
                $(this).siblings('ul').slideUp();
                $(this).next().slideToggle();
            });
        });
    </script>
</body>
</html>